<template>
  <div>
    <navTop></navTop>
    <div class="dingdan-content">
      <div class="list-tab">
        <router-link v-for="(item,index) in dingdanState" :key="index" :class="{active:activeIndex==index}" to="">
            <span @click="changeState(index)">{{item}}</span>
        </router-link>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import navTop from "./navTop"
export default {
  data () {
    return {
        dingdanState:["全部","配送中","已完成","无效"],
        activeIndex :this.$route.params.index
    }
  },

  components: {
      navTop
  },

  methods: {
      changeState(index){
        
      this.activeIndex = index
      this.$router.push("/my/dingdan/"+index+"/ddContent")
    },
  },
  watch:{
      $route:{
          handler(newval){
              this.changeState(this.$route.params.index)
          }
      }
  }
}
</script>

<style lang="scss" scoped>
.list-tab{
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  a{
    color: #959595;
    font-size: 14px;
  }
}
.active{
  color: #000!important;
}
</style>